<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-04-11 16:02:59
 * @Description: 
 -->
<template>
  <commonPage :showHeader="true" :header_title="header_title">
    <div slot="page_body">
      <scroller
        ref="my_scroller"
        :on-refresh="refresh"
        :on-infinite="infinite"
        height="-40"
        refresh-layer-color="#4b8bf4"
        loading-layer-color="#ec4949"
        class="page_body"
      >
        <div class="page_body_cont">
          <!-- <router-link
            v-for="(match, index) in match_list"
            :to="'/match/match_detail/index/' + match.id"
            :key="index"
          > -->
          <div v-for="(match, index) in match_list" :key="index">
            <matchInc
              class="match_lists"
              :match="match"
              :showAudit="true"
              :showStatus="false"
            />
          </div>

          <!-- </router-link> -->
        </div>
      </scroller>
      <van-overlay :show="show_loading">
        <div class="wrapper">
          <van-loading type="spinner" color="#1989fa" />
        </div>
      </van-overlay>
    </div>
  </commonPage>
</template>
<script>
import commonPage from "../common/commonPage";
import matchInc from "../plugin/match_inc";
export default {
  name: "user_match",
  data() {
    return {
      show_loading: false,
      header_title: "赛事列表",
      classify_id: 0,
      search_text: "",
      match_list: []
    };
  },
  components: {
    commonPage,
    matchInc
  },
  created() {
    let that = this;

    //执行页面数据加载
    that.$axios.all([that.getMatchList(1)]).then(
      that.$axios.spread(function(match_list) {
        that.match_list = match_list.result.list;
        console.log(that.match_list);
        that.show_loading = false;
      })
    );

    // this.getMatchList();
    this.$wxShare(
      {
        title: "分享标题", // 分享标题
        desc: "分享描述", // 分享描述
        link: window.location.href // 分享链接
        //   debug:true
      },
      function() {
        //分享成功后的回调函数
      }
    );
  },
  methods: {
    getMatchList(init = 0) {
      // if(this.classify_id|| this.search_text){
      //   this.$axios
      //   .post("match.getMatchList", { classify_id: this.classify_id,search_text:this.search_text })
      //   .then(res => {
      //     this.match_list = res.result.list;
      //   })
      //   .catch(error => {
      //     console.log(error);
      //   });
      // }
      let obj = this.$axios({
        url: "match.getMePayMatchList",
        method: "post",
        data: {}
      });
      if (init == 1) {
        return obj;
      } else {
        obj
          .then(res => {
            this.match_list = res.result.list;
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    refresh(done) {
      let that = this;
      setTimeout(() => {
        that.$router.go(0);
        done();
      }, 1000);
    },
    infinite(done) {
      let that = this;
      setTimeout(() => {
        done(true);
      }, 1500);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.page_body {
  margin-top: 47px;
  height: calc(100% - 47px);

  .page_body_cont {
    width: 90%;
    margin-left: 5%;
    padding-top: 0;

    .match_lists {
      margin-top: 1rem;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>